<template>
  <layout title="rate评分">
    <layout-content title="基础使用">
      <tn-rate v-model="rateValue"></tn-rate>
      <view class="tn-margin-top-sm">
        <tn-rate v-model="minRateValue" :min="1" :max="8"></tn-rate>
      </view>
    </layout-content>

    <layout-content title="设置尺寸">
      <tn-rate v-model="rateValue" size="sm"></tn-rate>
      <view class="tn-margin-top-sm">
        <tn-rate v-model="rateValue"></tn-rate>
      </view>
      <view class="tn-margin-top-sm">
        <tn-rate v-model="rateValue" gutter="20"></tn-rate>
      </view>
      <view class="tn-margin-top-sm">
        <tn-rate v-model="rateValue" size="lg"></tn-rate>
      </view>
      <view class="tn-margin-top-sm">
        <tn-rate v-model="rateValue" size="xl"></tn-rate>
      </view>
      <view class="tn-margin-top-sm">
        <tn-rate v-model="rateValue" size="80"></tn-rate>
      </view>
    </layout-content>

    <layout-content title="允许选择半个">
      <tn-rate v-model="halfRateValue" size="80" half></tn-rate>
    </layout-content>

    <layout-content title="禁止选择">
      <tn-rate v-model="rateValue" disabled></tn-rate>
    </layout-content>

    <layout-content title="设置选中与未选中的信息">
      <tn-rate v-model="rateValue" size="50" active-icon="sport-run" inactive-icon="sport-jog" active-color="tn-color-red" inactive-color="tn-color-grey--light"></tn-rate>
    </layout-content>

    <layout-content title="自定义选中项信息">
      <tn-rate v-model="rateValue" size="50" :custom-data="customActiveInfo"></tn-rate>
    </layout-content>
  </layout>

  <layout-doc v-model="showDoc" :content="docContent"></layout-doc>
  <doc-fab @click="handleDocFabClick"/>
</template>

<script lang="ts" setup>
import { CSSProperties, ref } from 'vue'
import { docContent } from './lib/doc'
import Layout from '@/components/layout/index.vue'
import LayoutContent from '@/components/layout/content.vue'
import LayoutDoc from '@/components/layout/doc.vue'
import DocFab from '@/components/doc-fab/index.vue'

import TnRate from '@/tuniao-ui/components/tn-rate/src/Rate.vue'
import { RateCustomData } from '@/tuniao-ui/types'

// 弹出文档 
let showDoc = ref<boolean>(false)
const handleDocFabClick = () => {
  showDoc.value = true
}

// 选中的值
let rateValue = ref<number>(0)
let minRateValue = ref<number>(0)
let halfRateValue = ref<number>(1.5)

// 自定义选中信息
const customActiveInfo: RateCustomData[] = [
  {index: 0, activeIcon: 'wea-sun', inactiveIcon: 'wea-cloud', activeColor: 'tn-color-orange--light', inactiveColor: 'tn-color-gray--light'},
  {index: 1, activeIcon: 'wea-sun', inactiveIcon: 'wea-cloud-more', activeColor: 'tn-color-orange--disabled', inactiveColor: 'tn-color-gray--disabled'},
  {index: 2, activeIcon: 'wea-sun', inactiveIcon: 'wea-cloud-sun', activeColor: 'tn-color-orange', inactiveColor: 'tn-color-gray'},
  {index: 3, activeIcon: 'wea-sun', inactiveIcon: 'wea-rain', activeColor: 'tn-color-orange--dark', inactiveColor: 'tn-color-gray--dark'},
  {index: 4, activeIcon: 'wea-sun', inactiveIcon: 'wea-rain-middle', activeColor: 'tn-color-red', inactiveColor: 'tn-color-grey'},
]
</script>

<style lang="scss" scoped>
</style>
